7枚のページから構成し、container-fluidで画面をいっぱい使う。一番最初に出すシリーズのトップページは各県の概要紹介するカードをスライドショーする。サイトの内容をnavbarで提示し、簡単なあいさつ文も添える。動画をslideする部分をfull-screenにする。シリーズのトップページ（入り口）としてページのアドレスをロゴに入れ、各ページにリンクを貼り付ける。
「ふるさと自慢」は8枚のカードとnavbarを明るく表現し、花写真をnavbarと
ページ背景につけ、カードの背景色も多色にする。各地の概要にその県庁ページへのリンクを紐付ける。
「ふるさと橋自慢」はページの背景にある大橋写真の上に紹介文を開閉できるcollapse機能を入れる。８枚カードに各地有名な橋とその紹介文を入れ、一部のカードの背景に写真を採用する。
「ふるさと名所自慢」は１枚slideShowに概要動画を、８枚のカードに各地の名所を紹介する。配置と配色のバランスを工夫する。
「ふるさと名物自慢」は１枚slide Fade Show に概要動画を、８枚のカードに各地の有名な工芸品を紹介する。
「ふるさと食自慢」は概要カードショーの動画及び8枚のカードを使って各地のグルメを紹介する。カードごとに２枚写真を上下、左右に配置し画面の華やかさを強調する。背景写真を固定し余白を設けることで、ページをめぐる楽しさを感じさせる。
各ページの配置が似ているが、カードの写真配置や背景色で差をつける。また、バランスのよい配色を採用する。
自慢関係の5つページのnavbarをページのtopに位置付け、ボタンの色で差をつける。
授業の内容をなるべく順に取り上げて、それぞれを例題として使えるように工夫する。
企画・制作 N.SUN 2021/8
